(function () {
    let container = document.querySelector('.container'),
        wrapper = container.querySelector('.wrapper'),
        slideList = wrapper.querySelectorAll('.slide'),
        paginationList = Array.from(container.querySelectorAll('.pagination span')),
        [btnPrev, btnNext] = Array.from(container.querySelectorAll('.btn'));

    /* 
     distance：每一次切换要运动的距离「当前案例是1226」
     step：当前展示slide的索引「默认0」
     count：记录slide的数量「包含克隆的那一张、最大索引count-1、当前案例是5」
     autoTimer：存储自动轮播的定时器
     interval：自动轮播间隔的时间
     */
    let distance = container.clientWidth,
        step = 0,
        count = slideList.length,
        autoTimer = null,
        interval = 3000;
    // 让WRAPPER处于初始索引这一张
    wrapper.style.transitionDuration = '0s';
    wrapper.style.left = `${-step * distance}px`;

    /* 控制分页器选中状态 */
    const paginationFocus = function paginationFocus() {
        let temp = step;
        if (step === count - 1) temp = 0;
        paginationList.forEach((item, index) => {
            item.className = index === temp ? 'active' : '';
        });
    };
    paginationFocus(); //让分页器的选中项,处于初始索引这一张

    /* 轮播图切换到下一张 */
    const moveNext = function moveNext() {
        if (step === count - 1) {
            // 当前已经是最后一张了(克隆的第一张)，没有办法再加1了：立即回到第一张
            step = 0;
            wrapper.style.transitionDuration = '0s';
            wrapper.style.left = `0px`;
            let temp = wrapper.offsetWidth; //目的:刷新渲染队列,先让轮播图切换回真实的第一张
        }
        step++;
        wrapper.style.transitionDuration = '0.3s';
        wrapper.style.left = `${-step * distance}px`;
        paginationFocus();
    };

    /* 轮播图切换到上一张 */
    const movePrev = function movePrev() {
        if (step === 0) {
            // 当前已经是第一张了：立即回到最后一张
            step = count - 1;
            wrapper.style.transitionDuration = '0s';
            wrapper.style.left = `${-step * distance}px`;
            let temp = wrapper.offsetWidth;
        }
        step--;
        wrapper.style.transitionDuration = '0.3s';
        wrapper.style.left = `${-step * distance}px`;
        paginationFocus();
    };

    /* 控制轮播 */
    // 开始自动轮播
    autoTimer = setInterval(moveNext, interval);

    // 鼠标进入/离开轮播图容器，控制自动轮播的暂停和开始
    container.onmouseenter = function () {
        clearInterval(autoTimer);
        autoTimer = null;
    };
    container.onmouseleave = function () {
        if (!autoTimer) autoTimer = setInterval(moveNext, interval);
    };

    // 离开当前页卡和重新进入，也要控制定时器暂停和开始
    document.onvisibilitychange = function () {
        if (document.hidden) {
            // 离开页卡
            clearInterval(autoTimer);
            autoTimer = null;
            return;
        }
        // 重新进入
        if (!autoTimer) autoTimer = setInterval(moveNext, interval);
    };

    // 点击左右按钮控制切换「函数节流:疯狂点击时,降低触发频率」
    btnPrev.onclick = utils.throttle(movePrev, 500);
    btnNext.onclick = utils.throttle(moveNext, 500);

    // 点击分页器实现切换
    paginationList.forEach((item, index) => {
        item.onclick = function () {
            if (step === index) return;
            step = index;
            wrapper.style.transitionDuration = '0.3s';
            wrapper.style.left = `${-step * distance}px`;
            paginationFocus();
        };
    });
})();